<template>
  <div class="s-nav-wrap">
    <div class="sear-box">
      <div class="showP">
        <swiper :options="swiperOption">
          <swiperSlide v-for="(item,i) in infoPic" :key="i">
            <img :src="item">
          </swiperSlide>
        </swiper>
        <div class="sear-icon">
          <img src="@/assets/images/3d.png" alt>
          3D模型
        </div>
      </div>
      <div class="brief">
        <div class="brief-title">{{info.titile}}</div>
        <div class="brief-price">
          <span class="sty1-font">￥{{defPrice}}</span>
          <!-- <span class="sty2-font">￥5678</span> -->
        </div>
      </div>
    </div>
    <div class="guige" @click="btnIsShow">
      <span class="xz">选择规格</span>
      <span class="guige-item" v-for="(item,i) in guige" :key="i">{{item}}</span>
    </div>
    <div class="brand-model">
      <p>
        <span class="txt-brand">品牌</span>
        <span>{{info.bName}}</span>
      </p>
      <p>
        <span class="txt-brand">型号</span>
        <span>{{info.pmodel}}</span>
      </p>
    </div>
  </div>
</template>

<script>
import bus from "../../../assets/js/eventBus";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  props: ["info", "infoPic"],
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {},
      defPrice: 0,
      guige: {}
    };
  },
  methods: {
    btnIsShow() {
      this.$emit("handleMask");
      // console.log(this.info);
    }
  },
  watch: {
    info(v) {
      this.defPrice = JSON.parse(v.detail[0].price);
      this.guige = JSON.parse(v.detail[0].specs);
    }
  },
  mounted() {
    bus.$on("getPrice", msg => {
      this.defPrice = msg;
    });
    bus.$on("getGuige", msg => {
      this.guige = msg;
    });
  }
};
</script>

<style lang="scss">
.sear-box {
  padding-top: 100px;
  .showP {
    position: relative;
    height: 778px;
    width: 1046px;
    .swiper-container {
      .swiper-wrapper {
        .swiper-slide {
          > img {
            width: 100%;
            height: 778px;
          }
        }
      }
    }

    .sear-icon {
      position: absolute;
      right: 48px;
      top: 40px;
      width: 180px;
      height: 60px;
      background: rgba(51, 51, 51, 0.6402);
      border-radius: 20px;
      border: 2px solid #fff;
      font-size: 28px;
      font-weight: 400;
      color: #fff;
      line-height: 60px;
      padding-left: 25px;
      z-index: 9;

      img {
        vertical-align: middle;
        margin-right: 4px;
      }
    }
  }
}
.brief {
  padding: 40px 48px;
  background: #fff;
  padding-top: 40px;
  .brief-title {
    font-weight: 500;
    color: #333333;
    font-size: 36px;
    margin-bottom: 36px;
  }
  .brief-price {
    .sty1-font {
      font-size: 40px;
      font-weight: 600;
      color: #d0021b;
      margin-right: 40px;
    }
    .sty2-font {
      font-size: 40px;
      font-weight: 400;
      color: #979797;
      text-decoration: line-through;
    }
  }
}
.guige {
  line-height: 108px;
  height: 108px;
  padding-left: 48px;
  font-size: 32px;
  font-weight: 400;
  color: #333333;
  margin-top: 20px;
  background: #fff;
  .xz {
    margin-right: 200px;
  }
  .guige-item {
    margin-right: 20px;
  }
}
.brand-model {
  padding-left: 48px;
  height: 166px;
  margin-top: 20px;
  background: #fff;
  overflow: hidden;
  p {
    font-size: 32px;
    font-weight: 400;
    margin-top: 30px;
    .txt-brand {
      margin-right: 32px;
      color: #7f7f7f;
    }
  }
}
</style>

